<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> <div class="box"> <h1> This is Reveal text </h1> </div>

body{ margin: 0; padding: 0; background: orange; } .box{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); text-align:center; border-bottom: 5px solid #fff; overflow: hidden; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); animation: reveal 2s linear forwards; } .box h1{ font-family: 'Permanent Marker', cursive; margin: 0; padding: 0; font-family: sans-serif; font-size: 3em; color: #fff; text-shadow: 2px 2px 2px rgba(0,0,0,.5); text-transform: uppercase; } @keyframes reveal { 0% { width: 0px; height: 0px; } 30% { width: 500px; height: 0; } 60% { width: 500px; height: 70px; } 80% { width: 500px; height: 70px; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); } 100% { width: 500px; height: 70px; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); } }